<template>
    <div class="sharetime-list">
         
         <div class="headertitel">
            <span><router-link to="/myorder"><img class="returnimg" src="../../../static/img/myorder/return@2x.png" alt=""></router-link></span>
            <span class="receiable">已取消/超时</span>
            <span></span>
         </div>

         <div class="sharetime-item">
             <div class="title">
                 <div>
                    <span>id:</span>
                    <span>icon</span>
                    <span>name</span>
                 </div>
                 <div class="title-item">
                     <span>{已超时}</span>
                </div>
             </div>
             <div class="contentdiv">
                <div class="content">
                    <p><img src="../../../static/img/myorder/headline@2x.png" alt="">&nbsp;<span>{去加大神尧微信看}</span> </p>
                    <p><img src="../../../static/img/myorder/from@2x.png" alt="">从<strong>·</strong>&nbsp;{红棉楼}</p>
                    <p><img src="../../../static/img/myorder/arrive@2x.png" alt="">到<strong>·</strong>&nbsp;{实践园}</p>
                    <p><img src="../../../static/img/myorder/time@2x.png" alt="">&nbsp;预约时间：<span style="color:#ff0000">{下午5点}</span></p>
                </div>
             </div>
             <div class="footer">
                <div class="footer-item">
                    <span style="color:black;font-size:16px;">小费&nbsp;</span>
                    <span style="color:#f9c37e;font-size:16px;">{100.00}元</span>
                </div>
                <div>
                    <span><img class="cancle" src="../../../static/img/myorder/detail@2x.png"  alt=""></span>
                </div>
             </div>
         </div>

         <div class="sharetime-item">
             <div class="title">
                 <div>
                    <span>id:</span>
                    <span>icon</span>
                    <span>name</span>
                 </div>
                 <div class="title-item">
                     <span>{已取消}</span>
                </div>
             </div>
             <div class="contentdiv">
                <div class="content">
                    <p><img src="../../../static/img/myorder/headline@2x.png" alt="">&nbsp;<span>{去加大神尧微信看}</span> </p>
                    <p><img src="../../../static/img/myorder/from@2x.png" alt="">从<strong>·</strong>&nbsp;{红棉楼}</p>
                    <p><img src="../../../static/img/myorder/arrive@2x.png" alt="">到<strong>·</strong>&nbsp;{实践园}</p>
                    <p><img src="../../../static/img/myorder/time@2x.png" alt="">&nbsp;预约时间：<span style="color:#ff0000">{下午5点}</span></p>
                </div>
             </div>
             <div class="footer">
                <div class="footer-item">
                    <span style="color:black;font-size:16px;">合计&nbsp;</span>
                    <span style="color:#f9c37e;font-size:16px;">{100.00}元</span>
                </div>
                <div>
                    <span><img class="cancle" src="../../../static/img/myorder/detail@2x.png"  alt=""></span>
                </div>
             </div>
         </div>
        
    </div> 
</template>


<script>
export default {
    data(){ //往自己组件内部，挂载私有的数据
        return {
            pageindex:1,
            sharetimelist:[]
        };
    },
    // created(){
    //     this.getsharetimelist();
    // },
    methods:{

        //getsharetimelist(){
            // this.$http
            // .get('http://172.16.19.158/wysx3/website/index.php/Home/test/get_authcode_by_user_tel')
            // .then(result=>{
            //     console.log(result)
            //     // if(result.body.status === 0){
            //     //     this.sharetimelist = result.body.message;
            //     // }
            // }); 
         //}
    
   
    }
}
</script>


<style lang="scss" scoped>
.sharetime-list{
    width: 22rem;
    flex-direction: column;
    .sharetime-item{
        background-color: #fff;
         margin-bottom: 0.6rem;
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem 0.5rem 1rem; 
            border-bottom: solid 2px #EFEFF4;
            .title-item{
                span{
                    font-size: 15px;
                    color: #ff0000;
                }
                img{
                    padding-top: 4px;
                    width: 8px;
                    height: 15px;
                }
            }
        }
        .contentdiv{
            display: flex;
            justify-content: center;
            padding-left: 4rem;
            .content{
                flex-direction: column;
                width: 15rem;
                padding-top: 8px;
                padding-bottom: 8px;
                p{
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    padding-top: 5px;
                    img{
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }
        .footer{
            display: flex;
            justify-content: space-between;
             padding: 0.5rem 1rem 0.5rem 1rem; 
            .footer-item{
                display: flex;
                align-items: center;
            }
        }
    }
}
.costimg{
    width: 20px;
    height: 20px;
}
.cancle{
    width: 70px;
    height: 22px;
}
.headertitel{
    width: 24rem;
    height: 3rem;
    margin-left: -1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin-bottom: 1rem;
}
.returnimg{
    margin-left: 2rem;
    height:18px;
    width:18px;
    margin-top:5px;
}
.receiable{
    margin-right: 3.5rem;
}
</style>
